import './index.less';
import potImg from '@/assets/images/cooker.png';
import { useRef } from 'react';

// QUESTION: 为啥不能用@/utils/xx 引入
import { statusTextConvert } from '../../utils/filters.ts';

import Fault from './Fault';
import Offline from './Offline';
import FaultPop from './FaultPop';

/**
 * 模块化：js 拆分
 * 组件化：组件拆分
 *
 * React开发者工具调试：chrome 插件：React Developer Tool
 * 定义组件：函数组件。类组件 （一般用函数组件多一点）
 * 函数式组件：
 *
 */

export default function Banner({ propsBanner }: any) {
  // propsBanner 是 props 子组件传参
  const { status, isOnline, fault, Workinghours, mode } = propsBanner;

  /**
   * createRef 主要用于 class 组件。而函数组件通常使用 useRef
   * 通过 ref 操作 Dom
   */
  const childRefs: any = useRef(null);
  // 故障弹窗
  function showErrorDetail() {
    childRefs.current.show();
  }

  function filterBg(): string {
    if (!isOnline) {
      // 离线
      return '#737373';
    } else {
      if (fault) {
        // 故障
        return '#FA4B4B';
      } else {
        // 在线
        return '#16BA7E';
      }
    }
  }
  return (
    <div>
      <div
        className="banner"
        style={{
          background: filterBg()
        }}
      >
        <div className="pot">
          <img src={potImg} alt="" />
        </div>
        <div className="status">
          {/* 设备离线的时候，不显示设备的状态小圆圈样式 */}
          {isOnline && <span></span>}
          <div>{statusTextConvert(status, isOnline)}</div>
        </div>
        <div className="worktime">
          {/* 快煮饭倒计时 8min */}
          {status === 1 &&
            (mode === 2 && Workinghours <= 8 && Workinghours > 0 ? (
              <span>运行剩余时间: {Workinghours}min</span>
            ) : null)}
          {/* 精煮饭 倒计时 10min */}
          {status === 1 &&
            (mode === 3 && Workinghours <= 10 && Workinghours > 0 ? (
              <span>运行剩余时间: {Workinghours}min</span>
            ) : null)}
        </div>
      </div>

      {/* 故障 */}
      {fault !== 0 && (
        <div onClick={showErrorDetail}>
          <Fault faultProps={fault} />
        </div>
      )}
      {/* 故障详情
       * 在 forwardRef 中接收父组件的参数 {...{ fault }}
       */}
      <FaultPop {...{ fault }} ref={childRefs} />

      {/* 离线, 离线的权限大于故障 */}
      {!isOnline && <Offline />}
    </div>
  );
}
